<template>
  <div class="main">
    <div class="card">
      <div class="search flex-between flex-align-items-center">
        <div class="search-left flex flex-align-items-center">
          <div class="search-input">
            <el-input placeholder="请输入你需要搜索的品牌名"></el-input>
            <i class="iconfont icon-sousuo pointer"></i>
          </div>
          <cate :check="form.cate" @change="cateChange"></cate>
        </div>
      </div>

      <el-table :data="tableData" height="600" style="width: 100%;" class="table">
        <el-table-column width="320">
          <template #default="scope">
            <div class="row-info flex flex-align-items-center">
              <img :src="scope.row.img" class="pointer">
              <div class="info">
                <p class="info-name font-18-B pointer">{{ scope.row.name }}</p>
                <div class="info-cates flex">
                  <p v-for="(item, index) in scope.row.cates" :key="index" class="font-12">{{ item }}</p>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="解锁日期" />
        <el-table-column prop="name" label="最新发布日期" />
        <el-table-column label="推广红人数">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="推广视频数">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="品牌互动率" />
        <el-table-column label="曝光量">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination flex flex-align-items-center" style="justify-content: end;height: 64px;">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Cate from './components/cate.vue';
import { ref } from 'vue';
import numConvert from '@/js/numConvert.js';

const form = ref({
  cate: [],
  total: 100
});
const tableData = ref([
  {
    id: 1,
    follow: false,
    Unlock: true,
    name: 'xxx',
    img: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
    cates: ['数码电器'],
    count: 11111
  },
]);

const cateChange = e => {
  form.value.cate = e;
};
</script>

<style lang="less" scoped>
.main {
  padding: 16px;

  .card {
    padding: 24px 16px 0;
    background: #fff;
    border-radius: 20px;
  }
}

.search {
  margin-bottom: 24px;

  .search-left {
    .search-input {
      width: 320px;
      height: 44px;
      position: relative;

      &::v-deep {
        .el-input {
          width: 100%;
          height: 44px;
        }
      }

      i {
        color: @main-color;
        position: absolute;
        right: 14px;
        top: 14px;
        z-index: 10;
      }
    }
  }
}

.table {
  .row-info {
    img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      margin-right: 12px;
    }

    .info {
      .info-name {
        color: #333;
        margin-bottom: 4px;
      }

      .info-cates {
        p {
          height: 24px;
          padding: 0 8px;
          background: hsla(0, 0%, 93%, .4);
          border-radius: 4px;
          border: 1px solid #dcdee0;
          color: #666;
          line-height: 22px;
          margin-right: 8px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
